// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入 富文本编辑器 组件
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    // 注册为局部组件：
    quillEditor
  },
  data () {
    return {
    // 步骤条高亮索引号
      stepActive: 0,
      // tab标签页高亮name
      tabActive: 'basic',
      // 添加商品表单数据
      goodsAddForm: {
        goods_name: '',
        goods_cat: [],
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        is_promote: false,
        pics: [],
        // 商品详情
        goods_introduce: ''
      },
      // 分类数据
      cateList: [],
      files: [],
      uploadHeader: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  created () {
    this.getCatList()
  },

  methods: {
    /**
     * 切换tab页
     */
    changeTab (tab) {
      this.stepActive = tab.index - 0
    },
    /**
     * 点击下一步切换步骤条和tab标签页的高亮效果
     */
    nextStep (step, tabName) {
      this.stepActive = step
      this.tabActive = tabName
    },
    /**
     * 文件上传成功时的回掉函数
     *
     */
    async uploadSuccess (response, file, fileList) {
      console.log(response, file, fileList)
      const path = response.data.tmp_path
      this.goodsAddForm.pics.push({
        pic: path
      })
    },
    /**
     * 获取分类列表数据
     */
    async getCatList () {
      const res = await this.$http.get('/categories', {
        params: {
          type: 3
        }
      })
      this.cateList = res.data.data
    },
    /**
     * 添加商品
     */
    async addGoods () {
      /* eslint-disable camelcase */
      const {
        goods_name,
        goods_cat,
        goods_price,
        goods_number,
        goods_weight,
        is_promote,
        goods_introduce,
        pics
      } = this.goodsAddForm

      const res = await this.$http.post('/goods', {
        goods_name,
        goods_cat: goods_cat.join(','),
        goods_price,
        goods_number,
        goods_weight,
        is_promote,
        goods_introduce,
        pics
      })

      // 跳转到商品列表页面
      this.$router.push('/goods')
      // 提示添加成功
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    }
  }
}
